<template>
  <svg
    t="1745819948498"
    class="loading-icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="2676"
    :width="width"
  >
    <path
      d="M469.333333 85.333333m42.666667 0l0 0q42.666667 0 42.666667 42.666667l0 128q0 42.666667-42.666667 42.666667l0 0q-42.666667 0-42.666667-42.666667l0-128q0-42.666667 42.666667-42.666667Z"
      fill="#000000"
      opacity=".8"
      p-id="2677"
    ></path>
    <path
      d="M469.333333 725.333333m42.666667 0l0 0q42.666667 0 42.666667 42.666667l0 128q0 42.666667-42.666667 42.666667l0 0q-42.666667 0-42.666667-42.666667l0-128q0-42.666667 42.666667-42.666667Z"
      fill="#000000"
      opacity=".4"
      p-id="2678"
    ></path>
    <path
      d="M938.666667 469.333333m0 42.666667l0 0q0 42.666667-42.666667 42.666667l-128 0q-42.666667 0-42.666667-42.666667l0 0q0-42.666667 42.666667-42.666667l128 0q42.666667 0 42.666667 42.666667Z"
      fill="#000000"
      opacity=".2"
      p-id="2679"
    ></path>
    <path
      d="M298.666667 469.333333m0 42.666667l0 0q0 42.666667-42.666667 42.666667l-128 0q-42.666667 0-42.666667-42.666667l0 0q0-42.666667 42.666667-42.666667l128 0q42.666667 0 42.666667 42.666667Z"
      fill="#000000"
      opacity=".6"
      p-id="2680"
    ></path>
    <path
      d="M783.530667 180.138667m30.169889 30.169889l0 0q30.169889 30.169889 0 60.339779l-90.509668 90.509668q-30.169889 30.169889-60.339779 0l0 0q-30.169889-30.169889 0-60.339779l90.509668-90.509668q30.169889-30.169889 60.339779 0Z"
      fill="#000000"
      opacity=".1"
      p-id="2681"
    ></path>
    <path
      d="M330.965333 632.661333m30.16989 30.16989l0 0q30.169889 30.169889 0 60.339778l-90.509668 90.509668q-30.169889 30.169889-60.339779 0l0 0q-30.169889-30.169889 0-60.339778l90.509668-90.509668q30.169889-30.169889 60.339779 0Z"
      fill="#000000"
      opacity=".5"
      p-id="2682"
    ></path>
    <path
      d="M843.861333 783.530667m-30.169889 30.169889l0 0q-30.169889 30.169889-60.339779 0l-90.509668-90.509668q-30.169889-30.169889 0-60.339779l0 0q30.169889-30.169889 60.339779 0l90.509668 90.509668q30.169889 30.169889 0 60.339779Z"
      fill="#000000"
      opacity=".3"
      p-id="2683"
    ></path>
    <path
      d="M391.338667 330.965333m-30.16989 30.16989l0 0q-30.169889 30.169889-60.339778 0l-90.509668-90.509668q-30.169889-30.169889 0-60.339779l0 0q30.169889-30.169889 60.339778 0l90.509668 90.509668q30.169889 30.169889 0 60.339779Z"
      fill="#000000"
      opacity=".7"
      p-id="2684"
    ></path>
  </svg>
</template>

<script>
export default {
  name: 'LoadingIcon',
  props: {
    width: { type: [Number, String], default: 20 },
  },
}
</script>

<style lang="scss" scoped>
.loading-icon {
  display: inline-block;
  animation: loading_animation 1s infinite linear;
}

@keyframes loading_animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
